
.header {
  pointer-events: none;
  transition: color .2s;
}
@keyframes btnAnimation2 {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, 100%);
  }
}

@media (pointer: fine) {
  .roll.on .translate {
    animation-name: btnAnimation2;
    animation-play-state: running;
    animation-iteration-count: 1;
    animation-duration: .4s;
    animation-timing-function: cubic-bezier(.16, .03, .08, 1.55);
  }
}

.roll .translate>span:last-child {
  position: absolute;
  bottom: 100%;
  left: 0;
}

.logo {
  display: block;
  height: 100%;
  object-fit: contain;
}

.header-wrapper .logo,
.roll2>span .logo,
.roll3>span .logo {
  height: 22px;
}

.roll .translate {
  display: inline-block;
}

.header-wrapper,
.header .link-logo {
  pointer-events: initial;
  overflow: hidden;
}
.header button {
  pointer-events: initial;
}